<template>
  <ag-popup
    v-model="visible"
    :title="dynamicTitle"
    class="service-info-config"
    @onCancel="onCancel"
  >
    <!-- 3DTILES服务 -->
    <div class="vscroll">
      <div id="listData">
        <a-table
          :columns="columns"
          :data-source="bimList"
          :pagination="pagination"
          :row-selection="rowSelection"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <el-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`Search ${column.dataIndex}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <el-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >Search</el-button>
            <el-button
              size="small"
              style="width: 90px"
              @click="() => handleReset(clearFilters)"
            >Reset</el-button>
          </div>
        </a-table>
      </div>
    </div>
    <div class="button-group">
      <el-button size="small" @click="onCancel">取消</el-button>
      <el-button size="small" type="primary" @click="addBim" disabled>添加</el-button>
    </div>
  </ag-popup>
</template>

<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
import axios from "axios";

const columns = [
  {
    title: "名称",
    dataIndex: "nameCn",
    key: "nameCn",
    width: "20%",
    scopedSlots: {
      filterDropdown: "filterDropdown",
      filterIcon: "filterIcon",
      customRender: "customRender"
    },
    onFilter: (value, record) =>
      record.nameCn
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => {
          this.searchInput.focus();
        }, 0);
      }
    }
  },
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: "40%",
  },
  {
    title: "url",
    dataIndex: "url",
    key: "url",
    width: "40%",
  }
];
export default {
  props: {
    dynamicTitle: {
      type: String,
      default: "Service infomation"
    }
  },
  components: {
    "ag-popup": AgPopup
  },
  data() {
    return {
      bimList: [],
      columns,
      selectedRowKeys: [],
      selectedRows: [],
      visible: false,
      isButtonDisable: true,
      pagination: {
        pageSize: 10,
        onChange: () => {
          this.selectedRows = [];
          this.selectedRowKeys = [];
        }
      },
      currentForm: {
        id:"",
        name: "",
        path: "",
        remark: "",
      },
    };
  },
  mounted() {
  },
  computed: {
    //选中的一行，读取其BIM的信息
    rowSelection() {
      return {
        onChange: this.onSelectChange,
        onSelect: this.onSelect,
        type: "radio", //多选/单选，checkbox or radio
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name
          }
        })
      };
    }
  },
  methods: {
    // 获取3dtiles所有数据
    getData() {
      this.bimList = [];
      var data = CIM.layerTree._layerTreeData;
      for (var i in data) {
        this.bimList.push(data[i]);
      }
    },
    //图层树列表关闭
    onCancel() {
      this.visible = false;
      this.isButtonDisable = true;
    },
    //选中的项目的key变化
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    //选中数据
    onSelect(record, selected, selectedRows) {
      this.selectedRows = [];
      if (selected) {
        this.selectedRows.push(record);
      }

      if (!selected) {
        let delIndex = this.selectedRows.findIndex(val => {
          return val.id === record.id;
        });
        this.selectedRows.splice(delIndex, 1);
      }
    },
    // 添加至表名bim_list
    addBim() {
      let parent = this.$parent;
      let formData = new FormData();
      let item = this.selectedRows[0];
      this.currentForm.name = item.nameCn;
      this.currentForm.remark = item.remark;
      this.currentForm.id = item.id;
      this.currentForm.path = item.url;
      this.$emit("save", this.currentForm);
      this.onCancel();
    },
    //搜索查询处理
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
    },
    //重置处理
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = "";
    }
  }
};
</script>
<style scoped>
.service-info-config {
  width: 800px;
}
.vscroll {
  overflow-y: auto;
}

.button-group {
  text-align: right;
  margin: 10px 5px;
}
.button-group span {
  margin-left: 8px;
  text-align: left;
  font-size: 16px;
}
.button-group button {
  margin-left: 10px;
}
/deep/.ant-table-body{
  background-color: transparent !important;
  height: 500px;
  overflow-y: auto;
}
/deep/.ant-table-header, /deep/.ant-table-hide-scrollbar{
  background-color: transparent;
}
/deep/.ant-table-body {
  user-select: text;
}
</style>